<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from '@cesium/Source/Cesium.js';

// Cesium.Camera.DEFAULT_VIEW_FACTOR=0.25//摄像机视口远近参数，可设置地球大小

import { defineComponent, ref, onMounted, h } from 'vue';
export default defineComponent({
  name: 'Cesium',
  setup() {
    return {
      viewer: null,
      rotater: null
    };
  },
  mounted() {
    Cesium.Ion.defaultAccessToken = $accessToken.default;
    var viewer = new Cesium.Viewer('cesiumContainer', {
      selectionIndicator: false,
      animation: false,
      // baseLayerPicker: false,
      //Use OpenStreetMaps
      // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
      //   url: 'https://a.tile.openstreetmap.org/'
      // }),
      // skyBox: new Cesium.SkyBox({
      //   sources: {
      //     positiveX: 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
      //     negativeX: 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
      //     positiveY: 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
      //     negativeY: 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
      //     positiveZ: 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
      //     negativeZ: 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
      //   }
      // }),
      geocoder: false,
      timeline: false,
      navigationHelpButton: false,
      homeButton: false,
      // sceneModePicker: false,
      fullscreenButton: false, //视察全屏按钮
      infoBox: false,
      shouldAnimate: true,
      clock: new Cesium.Clock({
        currentTime: Cesium.JulianDate.fromDate(new Date())
      }),
      orderIndependentTranslucency: false,
      contextOptions: {
        webgl: {
          alpha: true
        }
      }
    });

    // viewer.scene.skyBox.show = true;
    // viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    viewer.scene.globe.enableLighting = true; //启用以太阳为光源的地球

    this.viewer = viewer;
    
    // viewer.imageryLayers._layers.forEach(e=>e.show=false);

    //为了能明显的看到，将时针速度设为500倍
    this.initRotater().start({ multiplier: 500 });
  },
  methods: {
    initRotater() {
      let { viewer } = this;

      function rotater() {
        // 地球自转
        let icrf = function() {
          if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
            return;
          }
          const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(viewer.clock.currentTime);
          if (Cesium.defined(icrfToFixed)) {
            const camera = viewer.camera;
            const offset = Cesium.Cartesian3.clone(camera.position);
            const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
            camera.lookAtTransform(transform, offset);
          }
        };

        this.icrf = icrf;

        //option可以设置时钟的一些参数，比如自转开始的时间，自转的速度等
        this.start = function(option = { multiplier: 1 }) {
          viewer.scene.postUpdate.addEventListener(icrf);
          if (viewer.clock) {
            const keys = Object.keys(option);
            for (let k of keys) {
              viewer.clock[k] = option[k];
            }
          }
        };

        this.stop = function() {
          if (!viewer) {
            return;
          }
          viewer.clock.multiplier = 1;
          viewer.scene.postUpdate.removeEventListener(icrf);
          viewer = undefined;
        };
      }

      return (this.rotater = new rotater());
    }
  }
});
</script>

<style lang="less">
#cesiumContainer {
  width: 100%;
  height: 100%;
  .cesium-viewer-bottom {
    display: none !important;
  }
}
</style>
